import React, { Component } from "react";
import { Flex, Toast } from "antd-mobile";
import { StickyContainer, Sticky } from "react-sticky";
import MyCommonPickView from "../MyCommonPickView";
import MyPricePickView from "../MyPricePickView";
import MyRendTypePickView from "../MyRendTypePickView";
import MyScreeningPickView from "../MyScreeningPickView";
import { get } from "../../utils/Axios";
import { Spring, animated } from "react-spring";
import MyList from "../MyLIst";
import "./index.scss";
const data = [
  {
    id: "1",
    name: "区域",
  },
  {
    id: "2",
    name: "方式",
  },
  {
    id: "3",
    name: "租金",
  },
  {
    id: "4",
    name: "筛选",
  },
];

class MyFilterSecond extends Component {
  state = {
    selectId: "",
    dataList: [],
    collectData: [
      { id: 1, data: "", isSelect: false, defaultValue: [] },
      { id: 2, data: "", isSelect: false },
      { id: 3, data: "", isSelect: false },
      { id: 4, data: "", isSelect: false },
    ],
    HouseList: [],
  };
  // 获取筛选信息 以及 默认的房屋列表
  getDataList = async () => {
    const { positionValue } = this.props;
    const data = await get("/houses/condition", {
      id: positionValue,
    });
    this.setState({
      dataList: data.data.body,
    });
    Toast.hide();
    const HouseList = await get("/houses", {
      id: positionValue,
      start: 1,
      end: 200,
    });
    this.setState({
      HouseList: HouseList.data.body,
    });
  };

  componentDidMount() {
    Toast.loading("正在装载....", 999999);
    this.getDataList();
  }
  // 解析子节点的数据并保存
  praseChildDataAndSave = (data, index, isSelect, defaultValue) => {
    const { collectData } = this.state;
    collectData[index].data = data;
    collectData[index].isSelect = isSelect;
    collectData[index].defaultValue = defaultValue;
    this.setState({
      collectData,
      selectId: "0",
    });
    Toast.loading("正在装载....");
  };
  // 获取列表最新数据
  launch = (start, end) => {
    const { positionValue } = this.props;
    const { collectData } = this.state;

    const param = {};
    param.id = positionValue;

    // 判断是否选择地区或者狄忒
    if (collectData[0].data.type === "area") {
      if (
        collectData[0].data.data !== undefined &&
        collectData[0].data.data !== "area"
      ) {
        param.area = collectData[0].data.data;
      }
    } else if (collectData[0].data.type === "subway") {
      if (
        collectData[0].data.data !== undefined &&
        collectData[0].data.data !== "subway"
      ) {
        param.subway = collectData[0].data.data;
      }
    }

    // 判断 房租方式
    if (collectData[1].data !== "" && collectData[1].data[0] !== undefined) {
      param.rentType = collectData[1].data[0];
    }
    // 判断 租金 区间
    if (collectData[2].data !== "" && collectData[2].data[0] !== undefined) {
      param.price = collectData[2].data[0];
    }
    if (collectData[3].data !== "") {
      for (let i in collectData[3].data) {
        param[i] = collectData[3].data[i];
      }
    }
    param.start = start;
    param.end = end;

    get("/houses", param).then((result) => {
      this.setState({
        HouseList: result.data.body,
      });
      Toast.hide();
    });
  };

  // 从子节点获取数据
  collectDataMethod = (data, index, isSelect, defaultValue) => {
    this.praseChildDataAndSave(data, index, isSelect, defaultValue);
    this.launch(1, 200);
  };

  render() {
    const { selectId, dataList, collectData, HouseList } = this.state;
    let renderPickView;

    // 选择
    if (selectId === "1") {
      const { area, subway } = dataList;
      renderPickView = (
        <MyCommonPickView
          propsData={{ area, subway }}
          cols={3}
          defaultValue={collectData[0].defaultValue}
          collectDataMethod={this.collectDataMethod}
        ></MyCommonPickView>
      );
    }
    if (selectId === "2") {
      const { rentType } = dataList;
      renderPickView = (
        <MyRendTypePickView
          propsData={rentType}
          cols={1}
          defaultValue={collectData[1].defaultValue}
          collectDataMethod={this.collectDataMethod}
        ></MyRendTypePickView>
      );
    }
    if (selectId === "3") {
      const { price } = dataList;
      renderPickView = (
        <MyPricePickView
          propsData={price}
          cols={1}
          defaultValue={collectData[2].defaultValue}
          collectDataMethod={this.collectDataMethod}
        ></MyPricePickView>
      );
    }

    if (selectId === "4") {
      const { characteristic, floor, oriented, roomType } = dataList;
      renderPickView = (
        <MyScreeningPickView
          propsData={{ roomType, floor, oriented, characteristic }}
          collectDataMethod={this.collectDataMethod}
          defaultValue={collectData[3].defaultValue}
        ></MyScreeningPickView>
      );
    }

    return (
      <div className="MyFilterSecondWrapper">
        <StickyContainer>
          <Sticky>
            {({ style }) => (
              <div style={style}>
                <Flex>
                  {data.map((item) => {
                    return (
                      <Flex.Item id={item.id}>
                        <div
                          className={[
                            "selection",
                            (collectData[item.id * 1 - 1].isSelect ||
                              selectId === item.id) &&
                              "active",
                          ].join(" ")}
                          onClick={() => {
                            this.setState({
                              selectId: item.id,
                            });
                          }}
                        >
                          {item.name}
                        </div>
                      </Flex.Item>
                    );
                  })}
                </Flex>
                <Spring from={{ opacity: 0 }} to={{ opacity: 1 }}>
                  {(styles) => (
                    <animated.div style={styles}>{renderPickView}</animated.div>
                  )}
                </Spring>
              </div>
            )}
          </Sticky>
          <MyList
            toHouseDetail={this.props.toHouseDetail}
            houseMsgList={HouseList}
          ></MyList>
        </StickyContainer>
      </div>
    );
  }
}

export default MyFilterSecond;
